<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>制作商品图片列表</title>
		<link rel="shortcut icon" href="img/favicon.ico">
		<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 211px;
				height: 40px;
				line-height: 40px;
				margin-top: 10px;
				background-color: #997CF2;
				text-indent: 1em;
				font-family: "楷体";
				font-weight: bold;
				color: white;
			}


			li {
				list-style: none;
				border: 1px solid grey;
				width: 209px;
				height: 96px;
				margin-bottom: 5px;
			}

			li:hover {
				border: 2px solid orangered;
			}

			div,
			li {
				margin-left: 10px;
			}
		</style>

	</head>
	<body data-aos="zoom-out-down">
		<div>
			1F 美妆 珠宝
		</div>
		<ul>
			<li><img src="./img/练习1素材：制作商品图片列表/图片素材/photo-1.jpg" alt=""></li>
			<li><img src="./img/练习1素材：制作商品图片列表/图片素材/photo-2.jpg" alt=""></li>
			<li><img src="./img/练习1素材：制作商品图片列表/图片素材/photo-3.jpg" alt=""></li>
			<li><img src="./img/练习1素材：制作商品图片列表/图片素材/photo-4.jpg" alt=""></li>
			<li><img src="./img/练习1素材：制作商品图片列表/图片素材/photo-5.jpg" alt=""></li>
		</ul>



		<!-- AOS js -->
		<!-- 淡入淡出插件 -->
		<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
		<script>
			AOS.init({
				offset: 200,
				delay: 0,
				duration: 1000
			});
		</script>
	</body>
</html>
